<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/tag/jquery.tag-editor.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="超级管理员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>商品管理<small>分类管理</small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">商品</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <form id="form" action="__APP__/home/Superuser/Good/goodType" method="post">
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">商品分类</h3>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body no-padding">
                                    <table class="table table-striped">
                                        <tr>
                                            <th style="width: 30%">大种类</th>
                                            <th style="width: 60%">小分类</th>
                                            <th style="width: 10px"></th>
                                        </tr>
                                        <if condition="count($types) neq 0">
                                            <volist name='types' id='item'>
                                                <tr class="type">
                                            <td>
                                                <input name="maintype[]" class="form-control input-sm" placeholder="大类别" value="{$item.maintype}"/>
                                            </td>
                                            <td>
                                                <textarea name="subtype[]" class="form-control input-sm">{$item.items}</textarea>
                                            </td>
                                            <td>
                                                <button class="itemdel btn btn-danger btn-xs "><i class="glyphicon glyphicon-trash"></i></button>
                                            </td>
                                        </tr>
                                            </volist>
                                            <else />
                                            <tr class="type">
                                            <td>
                                                <input name="maintype[]" class="form-control input-sm" placeholder="大类别" />
                                            </td>
                                            <td>
                                                <textarea name="subtype[]" class="form-control input-sm"></textarea>
                                            </td>
                                            <td>
                                                <button class="itemdel btn btn-danger btn-xs "><i class="glyphicon glyphicon-trash"></i></button>
                                            </td>
                                        </tr>
                                        </if>
                                        
                                    </table>
                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer text-center">
                                    <button type="button" class="pull-left btn btn-primary" id="addItem">添加大类
                                        <i class="fa fa-plus-circle"></i></button>
                                    <button type="submit" class="pull-right btn btn-default" id="submit">确认提交
                                        <i class="fa fa-arrow-circle-right"></i></button>
                                </div>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                    <!-- /.box-body -->
                    <!-- /.box -->
                </div>
    </section>
    </div>
    <!-- /.col -->
    <include file="layout/copyright" />
    </div>
    <!-- /.content-wrapper -->
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <include file="layout/footer" />
    <!-- 当前定制 -->
    <script src="__PUBLIC__/tag/jquery.tag-editor.min.js"></script>
    <script src="__PUBLIC__/tag/jquery.caret.min.js"></script>
    <!-- DOM 操作 -->
    <script>
    </script>
    <!-- ./DOM -->
    <!-- AJAX -->
    <script type="text/javascript">
    $(document).ready(function() {
        $('textarea').tagEditor({
            placeholder: '添加子分类'
        });

        //添加规格
        $('#addItem').click(function() {
            var html = '<tr class="type">' +
                '<td><input name="maintype[]" class="form-control input-sm" placeholder="大类别"/></td>' +
                '<td><textarea name="subtype[]" class="form-control input-sm"></textarea></td>' +
                '<td><button class="itemdel btn btn-danger btn-xs ">' +
                '<i class="glyphicon glyphicon-trash"></i></button></td></tr>';
            $('.type').last().after(html);
            $('.type:last textarea').tagEditor({
                placeholder: '添加子分类'
            });
        });
        $('body').delegate('.itemdel', 'click', function() {
            var button = $(this);
            if ($('.type').size() > 1)
                button.parent().parent().remove();
        })
    });
    </script>
    <!-- /AJAX -->
    <!-- ./定制结束 -->
</body>

</html>